<template>
  <common-card :title="'今日交易用户数'" :value="'81.014'">
    <template #default>
      <div ref="usersChart" :style="{ width: '100%', height: '100%' }"></div>
    </template>
    <template v-slot:footer>
      <span>退货率</span>
      <span class="emphasis">5.14%</span>
    </template>
  </common-card>
</template>

<script setup lang="ts">
import * as echarts from "echarts/core";
import { BarChart, BarSeriesOption } from "echarts/charts";
import {
  GridComponent,
  GridComponentOption,
  TooltipComponent,
  TooltipComponentOption,
} from "echarts/components";
import { SVGRenderer } from "echarts/renderers";
import commonCard from "@/components/common-card/index.vue";
import { onMounted, ref, Ref } from "vue";

type ECOption = echarts.ComposeOption<
  BarSeriesOption | GridComponentOption | TooltipComponentOption
>;
echarts.use([BarChart, GridComponent, SVGRenderer, TooltipComponent]);
const usersChart = ref() as Ref<HTMLElement>;
onMounted(() => {
  const chart = echarts.init(usersChart.value);
  const options: ECOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    series: [
      {
        type: "bar",
        color: "#3398DB",
        data: [
          410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290, 330, 150,
        ],
        barWidth: "60%",
      },
    ],
    xAxis: {
      type: "category",
      show: false,
      data: [
        "00:00",
        "01:00",
        "02:00",
        "03:00",
        "04:00",
        "05:00",
        "06:00",
        "07:00",
        "08:00",
        "09:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
      ],
    },
    yAxis: {
      show: false,
    },
    grid: { top: 0, bottom: 0, left: 0, right: 0 },
  };

  chart.setOption(options);
});
</script>

<style></style>
